<template>
  <div>
    商品清单如下：
    <GoodsList v-for="(item, index) in delicacy" :key="index" :obj="item" />
    请选择购买数量：
    <GoodsCounts
      v-for="(item, index) in delicacy"
      :key="index"
      :index="index"
      :obj="item"
    />
    <!-- @subAddCount="addFFn"
      @subDelCount="delFFn" -->
    总价为：{{ total }}元
  </div>
</template>

<script>
import GoodsList from "./components/GoodsList.vue";
import GoodsCounts from "./components/GoodsCounts.vue";

export default {
  components: {
    GoodsList,
    GoodsCounts,
  },
  data() {
    return {
      delicacy: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
    };
  },
  //   methods: {
  //     addFFn(i, n) {
  //       console.log(i);
  //       this.delicacy[i].count += n;
  //     },
  //     delFFn(i, n) {
  //       this.delicacy[i].count -= n;
  //     },
  //   },
  computed: {
    total() {
      return this.delicacy
        .reduce((acc, val) => acc + val.price * val.count, 0)
        .toFixed(2);
    },
  },
};
</script>

<style></style>
